07413 webページのURLをワンタッチでコピーするBookmarkletをChatGPTに改善していただきました

https://flic.kr/p/2qNQdEd https://live.staticflickr.com/65535/54351221752_d7a7254f29_3k.jpg

以前書いたこちらのコード。

めっちゃ便利なのですが、最近、動かなくなりました。

原因はよくわからないながら、おそらくブラウザの仕様が変わったのだろうと思います。このコードを書いたのは2018年。セキュリティ向上などの要因でブラウザが進歩を続けていますので、7年近く、よくもったと思います。

https://flic.kr/p/2qNWQ5T https://live.staticflickr.com/65535/54352511595_ea8b2b6bf1_3k.jpg

優秀でお茶目なアシスタントを年間180ドル程度で雇える素晴らしい世の中になりましたね。

https://flic.kr/p/2qNWQ4W https://live.staticflickr.com/65535/54352511540_9c0cc92ba4_3k.jpg

1. document.execCommand("copy") の廃止

近年のブラウザでは execCommand("copy") が非推奨になり、navigator.clipboard.writeText() を使うのが推奨されています。

Safari でも document.execCommand("copy") は動くことがありますが、制限が強化されている可能性があります。

2. bb-code-text-field の取得方法

Flickr の UI 変更により .bb-code-text-field のクラス名が変わった可能性があります。

3. クリップボードコピー時の一時テキストエリア

textarea を作成してコピーする方式は、最新のブラウザでは推奨されません。

navigator.clipboard.writeText() を使えば textarea を作成しなくても直接コピーできます。

色々問題がありそうです。

https://flic.kr/p/2qNVUgi https://live.staticflickr.com/65535/54352330543_08f5c18c0a_3k.jpg

そこでチャッピーに書いていただいたコード。

code:BBcode

(async function(){

var x = document.querySelector('.bb-code-text-field'); // BBCodeのフィールドを取得

if (!x) {

alert("BBCodeテキストが見つかりませんでした。");

return;

}

// BBCodeをScrapbox用に変換

var s = x.value;

.replace('[url=', '[[')

.replace(/]].*/, ']]\n');

try {

// クリップボードにコピー

await navigator.clipboard.writeText(s);

// 「コピーしました！」の通知を作成

let alertBox = document.createElement("div");

alertBox.textContent = "コピーしました！";

alertBox.style.position = "fixed";

alertBox.style.top = "50%";

alertBox.style.left = "50%";

alertBox.style.transform = "translate(-50%, -50%)";

alertBox.style.background = "rgba(0, 0, 0, 0.8)";

alertBox.style.color = "#fff";

alertBox.style.padding = "15px 30px";

alertBox.style.borderRadius = "8px";

alertBox.style.zIndex = "10000";

alertBox.style.fontSize = "18px";

document.body.appendChild(alertBox);

// 1秒後に自動で削除

setTimeout(() => {

alertBox.remove();

}, 1000);

} catch (err) {

alert("コピーに失敗しました: " + err);

}

})();

code:bookmarklet

✅ 可読性が高い状態

✅ コメント付き

✅ FlickrのBBCodeをScrapbox用に変換

✅ クリップボードにコピー

✅ 中央に「コピーしました！」と通知

✅ 1秒後に自動で消える

となっています。

スムーズに動作しています。ありがたい!!

https://flic.kr/p/2qNUJbD https://live.staticflickr.com/65535/54352101521_10a3e8ee8d_3k.jpg

code:CosenseLink

javascript:(function() {

function showNotification(message) {

var notification = document.createElement("div");

notification.textContent = message;

Object.assign(notification.style, {

position: "fixed",

top: "50%",

left: "50%",

transform: "translate(-50%, -50%)",

background: "rgba(0,0,0,0.8)",

color: "#fff",

padding: "10px 20px",

borderRadius: "8px",

fontSize: "16px",

zIndex: "9999",

textAlign: "center"

});

document.body.appendChild(notification);

setTimeout(() => document.body.removeChild(notification), 1000);

}

if (navigator.clipboard && window.isSecureContext) {

navigator.clipboard.writeText(text).then(() => showNotification("コピーしました！"));

} else {

var textarea = document.createElement("textarea");

textarea.value = text;

document.body.appendChild(textarea);

textarea.select();

try {

document.execCommand("copy");

showNotification("コピーしました！");

} catch (err) {

showNotification("コピーに失敗しました");

}

document.body.removeChild(textarea);

}

})();

code:Bookmarklet

javascript:(function()%7Bvar%20text%3D%22%5B%22%2Bdocument.title.replace(%2F%5Cs*%5B%5C%5B%5C%5D%5D%5Cs*%2Fg%2C%27%20%27)%2B%22%20%22%2Bdocument.URL%2B%22%5D%22%3Bfunction%20showNotification(message)%7Bvar%20notification%3Ddocument.createElement(%22div%22)%3Bnotification.textContent%3Dmessage%3BObject.assign(notification.style%2C%7Bposition%3A%22fixed%22%2Ctop%3A%2250%25%22%2Cleft%3A%2250%25%22%2Ctransform%3A%22translate(-50%25%2C%20-50%25)%22%2Cbackground%3A%22rgba(0%2C0%2C0%2C0.8)%22%2Ccolor%3A%22%23fff%22%2Cpadding%3A%2210px%2020px%22%2CborderRadius%3A%228px%22%2CfontSize%3A%2216px%22%2CzIndex%3A%229999%22%2CtextAlign%3A%22center%22%7D)%3Bdocument.body.appendChild(notification)%3BsetTimeout(()%3D%3Edocument.body.removeChild(notification)%2C1000)%3B%7Dif(navigator.clipboard%26%26window.isSecureContext)%7Bnavigator.clipboard.writeText(text).then(()%3D%3EshowNotification(%22%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%EF%BC%81%22))%3B%7Delse%7Bvar%20textarea%3Ddocument.createElement(%22textarea%22)%3Btextarea.value%3Dtext%3Bdocument.body.appendChild(textarea)%3Btextarea.select()%3Btry%7Bdocument.execCommand(%22copy%22)%3BshowNotification(%22%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%EF%BC%81%22)%3B%7Dcatch(err)%7BshowNotification(%22%E3%82%B3%E3%83%94%E3%83%BC%E3%81%AB%E5%A4%B1%E6%95%97%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%22)%3B%7Ddocument.body.removeChild(textarea)%3B%7D%7D)();

チャッピー、ありがとう🩷

https://flic.kr/p/2qPLWLq https://live.staticflickr.com/65535/54361899448_73003f4f86_3k.jpg